// 支付方式
<template>
  <div class="container">
    <h4>{{ title1 }}</h4>

    <ul>
      <li v-for="(elb,index) in elbG" :key="index">
        <el-button @click="selectMethods(index)" :class=" index == act ? 'active':''">{{ elb }}</el-button>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "paymentMethod",

  props: {
    elbG: Array,
    title1: String,
    active: Number
  },

  data() {
    return {
      act: this.active
    }
  },

  methods: {
    selectMethods(index) {
      if (!index == 0) {
        this.act = index
      } else {
        this.$notify.info({
          title: "抱歉",
          message: "此功能正在努力开发中 敬请期待..."
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  width: 1200px;
  h4 {
    line-height: 50px;
  }
  ul {
    display: flex;
    flex-direction: row;
    li {
      padding: 0 10px;
      &:first-child {
        padding: 0px;
      }
      .el-button {
        letter-spacing: 2px;
        padding: 0 40px;
        line-height: 30px;
      }
      .active {
        background: #0078ff;
        color: #fff;
      }
    }
  }
}
</style>
